<template>
    <div >
        <a-row style="margin-bottom: 20px;">
            <a-space :size="20">
                <a-button type="primary"  @click="add">添加语言</a-button>
                <a-button type="outline" @click="edit">编辑语言</a-button>
            </a-space>
        </a-row>
        <a-table :columns="columns" :data="tableData"  :pagination="false"/>
        <add-form ref="addRef" @success="refresh" />
        <editForm @success="refresh" ref="editRef"></editForm>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive,nextTick} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import languageApi from '@/api/system/system'
import addForm from './add.vue'
import editForm from './edit.vue'
const searchForm = ref({
    client:'api'
})
const columns = reactive([
    { title: '文件名', dataIndex: 'name', align: 'center', },
    { title: '版本', dataIndex: 'version', align: 'center' },
    { title: '语言备注', dataIndex: 'lang_name', align: 'center' },
])
const tableData=ref([])
const editRef=ref()
const addRef=ref()
const initPage = async () => { }
const refresh = async () => {   
   const {data}=await languageApi.languageList(searchForm.value)
   tableData.value=data
}
const add=()=>{
    addRef.value?.open(searchForm.value.client)
}
const edit =()=>{
    editRef.value?.open(searchForm.value.client)
}
const getData=(api)=>{
        tableData.value=[]
        searchForm.value.client=api
        refresh()
}

onMounted(async () => {
    initPage()
})
defineExpose({
    getData
})
</script>

<style scoped>
</style>